<template>
  <div>
    <div id="navbar">
        <div class="lww_header">
            <div class="header_wrap">
                <div class="header_logo">
                    <a href="javascript:void(0);" class="lww_logo"></a>
                </div>
                <ul class="header_nav">
                    <li name="index" :class="[ this.$route.path == '/home' ? 'header_nav_active':'']"><router-link to="/">首页</router-link></li>
                    <li name="destination" :class="[ this.$route.path == '/destination' ? 'header_nav_active':'']"><router-link to="/destination">目的地</router-link></li>
                    <li name="strategyIndex" :class="[ this.$route.path == '/strategyIndex' ? 'header_nav_active':'']"><router-link to="/strategyIndex">旅游攻略</router-link></li>
                    <li name="travelIndex" :class="[ this.$route.path == '/travelIndex' ? 'header_nav_active':'']"><router-link to="/travelIndex">旅游日记</router-link></li>
                    <li name=""><a href="javascript:void(0);">去旅行<i class="icon_caret_down"></i></a></li>
                    <li name=""><a href="javascript:void(0);">社区<i class="icon_caret_down"></i></a></li>
                </ul>
                <div class="header_search">
                    <input type="text">
                    <a class="icon_search"></a>
                </div>
                <div class="login_info" style="display: none;">
                    <div class="head_user">
                        <a href="./index.html">
                            <img src="../assets/images/default.jpg" id="login_user_headUrl">
                            <i class="icon_caret_down"></i>
                        </a>
                    </div>
                    <div class="header_msg">
                        消息<i class="icon_caret_down"></i>
                    </div>
                    <div class="header_daka">
                        <a href="javascript:void(0);">打卡</a>
                    </div>
                </div>
                <!-- 未登录 -->
                <div class="login-out" v-show="show">
                <a
                    class="weibo-login"
                    title="微博登录"
                    rel="nofollow"
                    @click="login"
                ></a>
                <a class="qq-login" title="QQ登录" rel="nofollow" @click="login"></a>
                <a
                    class="weixin-login"
                    title="微信登录"
                    rel="nofollow"
                    @click="login"
                ></a>
                <a id="_j_showlogin" title="登录骡窝窝" rel="nofollow" @click="login"
                    >登录</a
                >
                <span class="split">|</span>
                <a title="注册帐号" rel="nofollow" @click="regist">注册</a>
                </div>
                <!-- 已登录 -->
                <div v-show="!show" class="logged">
                <img class="logged-img" src="../assets/images/default.jpg" />
                <span class="logged-text" @click="signout">退出登录</span>
                </div>
            </div>
            <div class="shadow"></div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    //登录
    login() {
      //跳转登录页面
      this.$router.push("/login");
      //存头部隐藏值
      this.$store.state.loginShow = false;
    },
    //退出
    signout() {
      //删除登录凭证
      localStorage.clear("token");
      //打开登录状态
      this.show = true;
    },
    //注册
    regist() {
      //跳转注册页面
      this.$router.push("/regist");
      //存头部隐藏值
      this.$store.state.loginShow = false;
    },
  },
  created() {
    //修改登录状态
    let token = this.$store.state.loginToken;
    if (token) {
      this.show = false;
    } else {
      this.show = true;
    }
  },
  watch: {
    "$route.path": {
      handler(newVal, loadVal) {
        //修改登录状态
        let token = this.$store.state.loginToken;
        if (token) {
          this.show = false;
        } else {
          this.show = true;
        }
        if (newVal == "/") {
          //存头部隐藏值
          this.$store.state.loginShow = true;
        }
      },
    },
  },
};
</script>


<style scoped lang="less">
.logged {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 58px;
  .logged-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }
  .logged-text {
    margin-left: 20px;
    cursor: pointer;
  }
}


    /** 头部样式 **/

.lww_header {
    position: relative;
    z-index: 90;
    height: 68px;
    background-color: #fff;
}

.header_wrap {
    width: 1000px;
    height: 68px;
    margin: 0 auto;
    _overflow: hidden;
    position: relative;
    z-index: 2;
}

.header_logo {
    float: left;
    width: 136px;
    padding: 13px 0;
    height: 32px;
}

.lww_logo {
    display: block;
    height: 39px;
    background: url('../assets/images/header-sprites15.png') no-repeat 0 0;
    position: relative;
}

.header_nav {
    float: left;
    display: inline;
    padding: 0 10px 0 25px;
    line-height: 68px;
    font-size: 14px;
    color: #333;
}

.header_nav li {
    float: left;
}

.header_nav li a {
    display: inline-block;
    padding: 0 16px;
    color: #333;
    vertical-align: top;
    overflow: hidden;
}

.header_nav li a:hover {
    text-decoration: none;
    color: #ff9d00;
    height: 65px;
    border-bottom: 3px solid #ff9d00;
}

.header_nav .header_nav_active a {
    background-color: #ff9d00;
    color: #fff !important;
    text-decoration: none;
}

.icon_caret_down {
    display: inline-block;
    margin: 0 -5px 0 3px;
    height: 0;
    width: 0;
    border-top: 4px solid #666;
    border-left: 4px dashed transparent;
    border-right: 4px dashed transparent;
    overflow: hidden;
    border-top-color: #666;
    vertical-align: middle;
    transition: transform .5s ease-in-out 0s;
}

.header_nav .header_nav_active a .icon_caret_down {
    border-top: 4px solid #fff;
    border-top-color: #fff;
}

.header_nav li a:hover .icon_caret_down {
    border-top: 4px solid #ff9d00;
    border-top-color: #ff9d00;
}

.header_nav .header_nav_active a:hover .icon_caret_down {
    border-top: 4px solid #fff;
    border-top-color: #fff;
}

.header_search {
    position: relative;
    box-sizing: border-box;
    float: left;
    width: 130px;
    height: 68px;
    padding: 16px 0 15px;
}

.header_search input {
    border: 1px solid #efefef;
    background-color: #efefef;
    width: 108px;
    height: 34px;
    padding: 0 10px;
    line-height: 34px;
    font-size: 14px;
    color: #666;
    border-radius: 4px;
    -webkit-transition: width .5s ease 0s;
    transition: width .5s ease 0s;
}

.icon_search {
    position: absolute;
    top: 22px;
    right: 8px;
    width: 20px;
    height: 20px;
    background-image: url('../assets/images/header-sprites15.png');
    background-position: -30px -110px !important;
    overflow: hidden;
}

.header_daka a:hover {
    text-decoration: none;
    color: #fff;
}

.login_info {
    float: right;
}

.head_user {
    float: right;
}

.head_user a {
    display: inline-block;
    color: #666;
    font-size: 14px;
    height: 68px;
    line-height: 68px;
}

.head_user a img {
    display: inline-block;
    /* margin-top: 16px; */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    vertical-align: middle;
}

.head_user a .icon_caret_down {
    vertical-align: middle;
}

.header_msg {
    float: right;
    margin-right: 25px;
    height: 68px;
    line-height: 68px;
    cursor: pointer;
}

.header_daka {
    float: right;
    width: 55px;
    margin-right: 25px;
    padding-top: 22px;
}

.header_daka a {
    display: block;
    height: 20px;
    background-color: #1493e3;
    text-align: center;
    line-height: 20px;
    color: #fff;
    border-radius: 4px;
    overflow: hidden;
    font-size: 12px;
}

.shadow {
    position: absolute;
    left: 0;
    bottom: -2px;
    right: 0;
    width: 100%;
    height: 2px;
    border-top: 1px solid #d6d6d6;
    background-color: rgba(0, 0, 0, .06);
    // filter: progid: DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#11000000', endColorstr='#11000000');
    overflow: hidden;
}

@media(max-width: 1440px) {
    .lww_header {
        height: 58px;
    }

    .header_wrap {
        height: 58px;
    }

    .header_logo {
        padding: 13px 0;
        height: 32px;
    }

    .lww_logo {
        height: 33px;
        width: 120px;
        background: url('../assets/images/header-small-sprites3.png') no-repeat 0 0;
        background-size:cover;
    }

    .header_nav {
        line-height: 58px;
        font-size: 14px;
    }

    .header_nav li a:hover {
        height: 55px;
    }

    .header_search {
        padding: 14px 0 13px;
        height: 58px;
    }

    .header_search input {
        height: 28px;
        line-height: 28px;
    }

    .icon_search {
        top: 19px;
    }

    .head_user a {
        height: 58px;
        line-height: 58px;
    }

    .head_user a img {
        /* margin-top: 12px; */
    }

    .header_msg {
        height: 58px;
        line-height: 58px;
    }

    .header_daka {
        padding-top: 18px;
    }
}
</style>
